<template>
<view class="pk-tag" :class="tagClass">
	<slot></slot>
</view>
</template>

<script>
export default{
	name:'pk-tag',
	props:{
		type:{
			type:String,
			default:'primary'
		},
		effect:{
			type:Boolean,
			default:true
		}
	},
	computed:{
		tagClass(){
			if(this.effect ) return this.type
			return this.type+'-effect'
		}
	},
	data(){
		return {
			
		}
	}
}
</script>

<style lang="scss" scoped>
.pk-tag{
	display: inline-block;
	font-size: 12px;
	padding: 0 8px;
	background: #ccc;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
}

.primary{
	background: #0099FF;
}
.success{
	background: #00CC66;
}
.purple{
	background: #6666FF;
}
.danger{
	background: #FF3366;
}
.info{
	background: #ccc;
}

.primary-effect{
	background: rgba(#0099FF, .1);
	color: #0099FF;
}
.success-effect{
	background: rgba(#00CC66, .1);
	color: #00CC66;
}
.purple-effect{
	background: rgba(#6666FF, .1);
	color: #6666FF;
}
.danger-effect{
	background: rgba(#FF3366, .1);
	color: #FF3366;
}
.info-effect{
	background: #ccc;
	color: #fff;
}

</style>